<template>
    <div class="content">
    <div class="search">
        日期：
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
        <el-button type="primary" class="button" @click="search({value1})">搜索</el-button>
    </div>
    <el-table
    :data="tableData"
    border
    :header-cell-style="{ textAlign: 'center' }"
    :cell-style="columnStyle"
    style="width: 100%;">
    <el-table-column prop="operating_area" label="县区" width="150" align="center"></el-table-column>
    <el-table-column prop="zongji"  label="总计" align="center"></el-table-column>
    <el-table-column prop="weixiu"  label="维修订单" align="center"></el-table-column>
    <el-table-column prop="baoyang"  label="保养订单" align="center"></el-table-column>
    <el-table-column prop="xiche"  label="洗车订单" align="center"></el-table-column>
  </el-table>
    </div>
</template>
<script>
import { OrderAndMerchantList } from "@/api/statistics/search";

export default {
   data() {
      return {
        value1:'',
        tableData: []
      }
   },
   created(){
    this.search();
   },
   computed:{
   },
   methods:{
    search(){
      
      OrderAndMerchantList().then(res=>{
        this.tableData = res.rows;
        console.log(tableData,'0000000000000000000000');
      })
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
        
      // 第一列的背景色
      if (columnIndex === 0) {
        return 'background:#efefef';
      }
      if(rowIndex < this.tableData.length + 1){
        return 'background:#9cdcfe';
      }
    },
}
}
</script>
<style  scoped>
.content{
    width: 96%;
    height: auto;
    margin: 20px;
}
.search{
    margin: 10px;
}
.button{
    margin-left: 10px;
}
</style>
